<template>
  <!--测试-->
  <div class="preferential" style="text-align: left; position: relative" :style="{'background' : color}">
    <div style="width: 100%;display: flex" >
      <div style="flex: 1;position: relative">
      <slot>

      </slot>
      </div>
      <span @click="isShow= !isShow" style="font-size: 0.70rem" class="cjy-der-down" :class="{'cjy-der-right' :isShow}">
  {{ '加¥' + parseFloat(addmoney || 0).toFixed(2)}}

               <del style="color: lightgrey;font-size: 0.7rem">¥{{currentMoney}}</del>
      </span>
      <div style="clear: both"></div>
    </div>

    <transition enter-active @beforeEnter="beforeEnter" @enter="enter" @leave="leave">
      <div v-show="isShow" class="cjy-show-Box">
        <div class="cjy-show-regular-detail">
          <!--<RegularShowList>-->

          <!--</RegularShowList>-->
          <li v-for="(item,index) in giftGoodsList"
              style="border-top: 1px dashed lightgrey;height: 1.5rem;line-height:1.5rem ;display: flex;padding:0.2rem 0 ">

            <label class="aui-label-danger aui-label-outlined cjy-icon" style="margin-left: 0.5rem;line-height: 1rem">商</label>
            <span class="cjy-regular-title">

              {{item.goodsName}}</span>
            <span class="cjy-regular-price"> 价值<span
              style="color: rgb(234, 57, 57)">¥{{ parseFloat(item.goodsPrice).toFixed(2)}}</span></span>
            <span class="cjy-regular-num">{{item.giveQuantity}}件</span>
          </li>

          <li v-for="(item,index) in giftCouponList"
              class="cjy-overflow"
              style="border-top: 1px dashed lightgrey;height: 1.5rem;line-height:1.5rem ">
            <label class="aui-label-danger aui-label-outlined cjy-icon" style="margin-left: 0.5rem;">券</label>
            <span > {{item.couponName}}</span>
          </li>
        </div>
      </div>
    </transition>

  </div>
</template>

<script>
  import RegularShowList from '@/components/RegularShowList'

  export default {
    data() {
      return {
        isShow: false,
        giftCouponList: [],
        giftGoodsList: [],
        listLenght: 0,
        addmoney: 0,
      }
    },
    components: {
      RegularShowList
    },
    created() {
      this.init()
    },
    props: {
      money: {
        type: Number,
        default: 0
      },
      color: {
        type: String,
        default: 'white'

      },
      giftDefault: {
        type: Object,
        default: () => {
        }

      }
    },
    watch: {
      giftDefault() {
        this.init()
      }
    },
    methods: {
      beforeEnter(el, done) {
        el.style.height = 0
      },
      enter(el, done) {
        var H = 0
        var timeOut = setInterval(() => {
          H += 0.08
          el.style.height = H + 'rem'

          if (H > 1.5 * this.listLenght) {
            done()
            clearTimeout(timeOut)
            this.$emit('refresh')
          }
        }, 1)
      },
      leave(el, done) {
        var H = 1.5 * this.listLenght
        var timeOut = setInterval(() => {
          H -= 0.08
          el.style.height = H + 'rem'

          if (H <= 0) {
            done()
            this.$emit('refresh')
            clearTimeout(timeOut)
          }
        }, 1)
      },
      init() {
        var data = this.giftDefault
        var giftType = data.giftType
        this.giftGoodsList = data.giftGoodsList
        this.giftCouponList = data.giftCouponList
        this.addmoney = this.money || data.addmoney || 0
        this.listLenght = data.giftGoodsList.length + data.giftCouponList.length
        if (giftType == 1) {

        }
      }
    },
    computed: {
      currentMoney() {
        var giftGoodsList = this.giftGoodsList
        var currentMoney = 0
        giftGoodsList.map((item) => {
          var price = item.goodsPrice || 0
          var number = item.giveQuantity || 0
          currentMoney += price * number
        })
        return parseFloat(currentMoney).toFixed(2)
      }

    }
  }
</script>

<style scoped>
  .cjy-sec-title {
    max-width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    margin-left: 0.5rem;
    vertical-align: middle;
  }

  .preferential {
    border-bottom: 1px solid gainsboro;
    padding: 0 !important;
    line-height: 1rem;
  }

  .preferential label {
    padding: 0
  }

  .preferential a {
    margin-top: 0.2rem;
    padding-right: 1rem;
  }
  .preferential a:before {
    top:50%!important;
  }
  .preferential .cjy-span, .preferential .cjy-add-sub {
    float: right;
    padding-right: 0.75rem;
    color: #EF5423;
    margin-top: 0.2rem;
  }


  .cjy-der-down {
    padding-right: 1.5rem;
    height: 2rem;
    line-height: 2rem;
    position: relative;
    display: inline-block;
    float: right !important;
    color: rgb(234, 57, 57);
  }

  .cjy-der-down:before {
    content: '';
    width: 0.4rem;
    height: 0.4rem;
    position: absolute;
    top: 47%;
    right: 0.6rem;
    margin-top: -0.2rem;
    background: transparent;
    border: 1px solid rgb(234, 57, 57);
    border-top: none;
    border-right: none;
    z-index: 2;
    -webkit-border-radius: 0;
    border-radius: 0;
    -webkit-transform: rotate(-135deg);
    transition: 0.3s;
    transform: rotate(-135deg);

  }

  .cjy-der-right:before {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }

  .cjy-show-Box {
    width: 100%;
    overflow: hidden;
    padding: 0 0.5rem;
    border-bottom: 1px solid gainsboro;
  }

  .cjy-show-regular-detail {
    /*height: 4rem;*/
    width: 100%;
  }

  .cjy-regular-title, .cjy-regular-price, .cjy-regular-num {
    display: inline-block;
    word-break: break-all;
    overflow: hidden;
    height: 1rem;
    line-height: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
  }

  .cjy-regular-title {
   flex: 1;
    padding-left: 0.5rem

  }

  .cjy-regular-price {
    width: 28%;
    text-align: right;
  }

  .cjy-regular-num {
    width: 12%;
    text-align: right;
    float: right;
    padding-right: 0.3rem
  }

  .cjy-icon {
    color: white;
    border-radius: 3px;
    background: rgb(234, 57, 57);
    border: 1px solid transparent !important;
  }
  .cjy-overflow {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
  }

</style>
